<template>
  <div class="category h-100">
    <div class="header">
      <header-m @searchClick="headerClick" @rightClick="headerClick"></header-m>
    </div>
    <div class="header-h"></div>
    <div class="category-list" v-show="nav.length">
      <div class="menu-wrapper" ref="menuWrapper">
        <ul>
          <li class="menu-item" ref="menuList" :class="{'active':currentMenuIndex == index}" v-for="(item, index) in nav" :key="item.id" @click="selectMenu(index, $event)">
            {{item.name}}
          </li>
        </ul>
      </div>
      <div class="goods-wrapper" ref="goodsWrapper">
        <div class="goods-con">
          <ul class="goods-list" v-if="subNav">
            <li v-for="item in subNav" :key="item.id">
              <div class="img">
                <img :src="item.img">
              </div>
              <div class="name">{{item.name}}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="loading-container" v-show="!nav.length">
      <loading></loading>
    </div>
  </div>
</template>

<script>
  import server from '@/api/server/index';
  import { Toast } from 'mint-ui';

  import loading from '@/components/loading/loading';
  import headerM from '@/components/header/header-m';
  import BScroll from 'better-scroll'
  export default {
  	name:'keepAlive',
    data() {
      return {
        currentMenuIndex: 0,
        nav: []
      }
    },
    activated() {
      this.$nextTick(() => {
        server.category().then((rs) => {
          this.nav = rs.nav;
          this.__initScroll();
        }).catch((ms) => {
          Toast(ms);
        });
      });
    },
    computed: {
      subNav (){
        if(this.nav.length){
          // 右侧商品重新刷新
          setTimeout(()=>{
           this.goodsScroll.refresh();
          },20);
          return this.nav[this.currentMenuIndex].subNav;
        }
      }
    },
    methods: {
      __initScroll() {
        this.goodsScroll = new BScroll(this.$refs.goodsWrapper, {
          scrollY: true,
          click: true,
          probeType: 3
        });
        this.meunScroll = new BScroll(this.$refs.menuWrapper, {
          scrollY: true,
          click: true,
          probeType: 3,
          bounce: false
        });
      },
      selectMenu(id) {
        this.currentMenuIndex = id;
        let menuList = this.$refs.menuList;
        // let el = menuList[id];
        // 自动移位
        // this.meunScroll.scrollToElement(el, 300, 0, -120);
      },
      headerClick() {
        this.$router.push({ path: 'search' })
      }
    },
    components: {
      headerM,
      loading
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';
  .category{
    .header{
      z-index: 50;
      position: fixed;
      left: 0;
      height: 42px;
      width: 100%;
    }
    .header-h{
      height: 42px;
    }
    .category-list{
    }
    .menu-wrapper{
      position: fixed;
      overflow: hidden;
      top: 42px;
      bottom: 53px;
      left: 0;
      width: 90px;
      background-color: @color-background-ll;
      .menu-item{
        position: relative;
        text-align: center;
        font-size: @font-size-medium;
        height: 50px;
        line-height: 50px;
        border-left: 2px solid @color-background-ll;
      }
      .active{
        border-left-color: @color-text-d;
        color: @color-text-d;
        background-color: @color-background-l;
      }
    }
    .goods-wrapper{
      position: fixed;
      overflow: hidden;
      top: 42px;
      bottom: 53px;
      left: 90px;
      right: 0;
      background-color: @color-background-l;
      .goods-con{
        padding: 10px;
      }
      .goods-list{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{
          padding: 10px 0;
          width: 33.33%;
          text-align: center;
          img{
            width: 58px;
            height: 58px;
          }
          .name{
            padding-top: 5px;
            font-size: @font-size-small;
          }
        }
      }
    }
    .loading-container{
      margin-top: 140px;
    }
  }
</style>
